let idLogin = document.querySelector('#idLogin');
let mLogin = document.querySelector('#mLogin');
let idBox = document.querySelector('#idBox');
let mBox = document.querySelector('#mBox')
let loginLine = document.querySelector('#loginLine');

idLogin.addEventListener('click', function () {
    //清空idbox类名
    idBox.classList.remove('mask-active')
    idLogin.style.color = '#00bdff'
    loginLine.style.left = '20px'

    //给mbox添加类名

    mBox.classList.add('mask-active')
    mLogin.style.color = '#222'
})
mLogin.addEventListener('click', function () {
    //清空mbox类名
    mBox.classList.remove('mask-active')
    loginLine.style.left = '126px'
    mLogin.style.color = '#00bdff'
    //给idbox添加类名

    idBox.classList.add('mask-active')
    idLogin.style.color = '#222'
})

//创建正则表达式来验证表单内容
let inputCheckArr = [
    nameExp = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/, //用户名 6-12位字母开头 可以又字母数字下划线
    pwdExp = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/ //密码  6-12位字母开头 可以又字母数字下划线
]
//获取元素
let errorTips = document.querySelectorAll('.error-tips')
let loginBtn=document.querySelector('#loginBtn')

/**
 * 3.需求 点击登录按钮时 进行表单验证
 */
let loginInput=document.querySelectorAll('.login-inp input')

loginBtn.addEventListener('click', function () {
    for (let i = 0; i < loginInput.length; i++) {
        let bool = inputCheckArr[i].test(loginInput[i].value)
        if (bool) {
            errorTips[i].style.display = 'none'
        } 
        else {
            errorTips[i].style.display = 'block'
            return //如果有一个输入错误则退出函数
        }
     } 
    location.href='../page/apilist.html'
}) 

/**
 * 4.需求 输入框输入时 显示删除图标 点击删除图标清空表单内容
 */

let userDelIcon=document.querySelector('.del-icon1')
let pwdDelIcon=document.querySelector('.del-icon2')

loginInput[0].addEventListener('input',function(){
    userDelIcon.style.display='block';
})

loginInput[1].addEventListener('input',function(){
    pwdDelIcon.style.display='block';
})

userDelIcon.addEventListener('click',function(){
    loginInput[0].value='';
    userDelIcon.style.display='none'
})

pwdDelIcon.addEventListener('click',function(){
    loginInput[1].value='';
    pwdDelIcon.style.display='none'
})